<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is="sui-header">
        Rating
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <sui-rating :rating="value" :max-rating="5" @rate="handleRate"/>
      <sui-divider/>
      <sui-rating class="star" :rating="value" :max-rating="5" @rate="handleRate"/>
      <sui-divider/>
      <sui-rating class="heart" :rating="value" :max-rating="5" @rate="handleRate"/>
      <sui-divider/>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Rating',
  data () {
    return {
      value: 0,
      payload: {}
    }
  },
  methods: {
    handleRate (evt, props) {
      this.value = props.rating
      this.payload = props
      console.log(this.value)
    }
  }
}
</script>

<style scoped>

</style>
